<template>
	<view class="container">
		<view class="project">
			<view :class="['project_item',(selectId == item.id ?'project_item_active':'')]" v-for="item in projectList" :key="item" @click="handleSelect(item)">
				<view class="project_item_title">{{ item.projectName}}</view>
				<view class="project_item_bottom">
					<view class="project_item_bottom_left">
						<text class="label">所属区县</text>
						<text class="value">{{ item.areaName }}</text>
					</view>
					<view class="project_item_bottom_right">
						<text class="label" style="margin-right: 20rpx;">项目状态</text>
						<u-tag :text="dictLabel(project_status, item.status)" plain plainFill size="mini" :bgColor="statuscy(item.status).backgroundColor" :color="statuscy(item.status).color" :borderColor="statuscy(item.status).borderColor"></u-tag>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import { getRoleAndProject } from '@/api/qss/index.js'
import { project_status, dictLabel} from "@/utils/common.js"
import { getEncryptedStr } from '@/utils/index.js'

const selectId = ref(1)
const projectList = ref([])

/* 选择项目 */
function handleSelect(item){
	if(selectId.value == item.id) return
	uni.showLoading()
	selectId.value = item.id
	uni.setStorageSync('activeProject', item)
	const userInfo = uni.getStorageSync('userInfo')
	uni.setStorageSync('userInfo', {...userInfo,role: item.role})
	getEncryptedStr().then(res =>{
		uni.switchTab({
			url: '/pages/index/index'
		})
	}).finally(()=>{
		uni.hideLoading()
	})
	
}

/* 获取项目列表 */
function getProjectList() {
  const phone = uni.getStorageSync('phone');
  if (!phone) {
    console.error('未获取到手机号');
    return;
  }
  uni.showLoading({ title: '加载中...' })
  getRoleAndProject({ phone }).then(res => {
    const { data: { projects = [], projects1 = [] } = {} } = res || {};

    const enhancedProjects = projects?.map(project => ({ ...project, role: '管理人员' })) || [];
    const enhancedEmployees = projects1?.map(employee => ({ ...employee, role: '从业人员' })) || [];
    
    projectList.value = [...enhancedProjects, ...enhancedEmployees];
    
    console.log('projectList', projectList.value);
  }).catch(error => {
    console.error('获取项目列表失败:', error);
  }).finally(()=>{
		uni.hideLoading();
	})
}


// 标签样式
const statuscy = (type) => {
    const styles = {
        1: { background: "#E3F5FF", color: "#25B2FD", borderColor: "#BBDBEC" },
        2: { background: "#EEF1F8", color: "#B2B7C3", borderColor: "#DFDFDF" },
        3: { background: "#FFF1F1", color: "#F92525", borderColor: "#FFD4D4" },
        4: { background: "#FFF1F1", color: "#F92525", borderColor: "#FFD4D4" },
        5: { background: "#ECFFF9", color: "#15D394", borderColor: "#AFE6D4" },
        6: { background: "#ECFFF9", color: "#15D394", borderColor: "#AFE6D4" },
        7: { background: "#ECFFF9", color: "#15D394", borderColor: "#AFE6D4" },
        8: { background: "#FFF9EF", color: "#F59B03", borderColor: "#F0E5D1" },
        default: { background: "#EEF1F8", color: "#B2B7C3", borderColor: "#DFDFDF" }
    };

    return styles[type] || styles.default;
};

onLoad((option)=>{
	getProjectList()
	if(uni.getStorageSync('activeProject')){
	    const activeProject = uni.getStorageSync('activeProject')
		selectId.value = activeProject.id
	}
})

</script>

<style lang="scss" >
page{
	background-color: #F5F5F5;
}
.container {
	padding: 40rpx;
	.project {
		width: 100%;
		&_item {
			width: 100%;
			height: 210rpx;
			padding: 32rpx 20rpx 0 32rpx;
			margin-bottom: 20rpx;
			background-color: #FFF;
			border-radius: 16rpx;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			&_title {
				flex: 1;
				font-size: 32rpx;
				line-height: 48rpx;
				font-weight: 600;
				color: #333333;
				//溢出隐藏
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			&_bottom {
				height: 80rpx;
				display: flex;
				&_left,
				&_right {
					height: 100%;
					display: flex;
					align-items: center;
					.label {
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
					}
					.value {
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
						margin-left: 20rpx;
					}
				}
				&_left{
					width: 40%;
				}
				&_right{
					width: 60%;
				}
			}
		}
		&_item_active {
			border-left: 10rpx solid #0066FF;
			border-radius: 4rpx 16rpx 16rpx 4rpx;
			padding: 32rpx 20rpx 0 24rpx;
		}
	}
}

</style>